<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('数据概览')" />
    <th:block th:include="include :: switchery-css" />
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body style="background: #f1f1f1;">
<div class="wrapper wrapper-content">
    <div class="container">
        <div class="row">
            <div class="col-lg-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">在库</span>
                        <h5>设备总数</h5>
                    </div>
                    <div class="ibox-content">
                        <div style="text-align: center">
                            <h1 class="no-margins">50</h1>
                            <small>总数</small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-info pull-right">已对接</span>
                        <h5>已接设备</h5>
                    </div>
                    <div class="ibox-content">
                        <div style="text-align: center">
                            <h1 class="no-margins">40</h1>
                            <small>接入设备数</small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-primary pull-right">24小时</span>
                        <h5>在线设备</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins">35</h1>
                        <div class="stat-percent font-bold text-navy">44% <i class="fa fa-heart"></i>
                        </div>
                        <small>今日活跃</small>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-danger pull-right">24小时</span>
                        <h5>离线设备</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins">5</h1>
                        <div class="stat-percent font-bold text-danger">38% <i class="fa fa-bell"></i>
                        </div>
                        <small>离线设备数</small>
                    </div>
                </div>
            </div>
        </div>


        <div class="row">
            <div id="main" class="col-lg-12" v-cloak>
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>记录监控</h5>
                        <!--                        <div class="ibox-tools">-->
                        <!--                            自动刷新 <input  type="checkbox" class="js-switch" checked />-->
                        <!--                        </div>-->
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-9 m-b-xs">
                                <div data-toggle="buttons" class="btn-group">
                                    <label class="btn btn-sm btn-white"  :class="{ active: scope == 1}" @click="queryList(1)">
                                        <input type="radio" name="scope"  value="1">天
                                    </label>
                                    <label class="btn btn-sm btn-white" :class="{ active: scope == 7}" @click="queryList(7)">
                                        <input type="radio" name="scope" v-model="scope"  value="7">周
                                    </label>
                                    <label class="btn btn-sm btn-white" :class="{ active: scope == 30}" @click="queryList(30)">
                                        <input type="radio" name="scope" v-model="scope"  value="30">月
                                    </label>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="input-group">
                                    <input type="text" placeholder="搜索" v-model="search" class="input-sm form-control">
                                    <span class="input-group-btn">
                                        <button type="button" class="btn btn-sm btn-primary"  @click="doSearch">搜索</button>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                <tr>
                                    <th>设备号</th>
                                    <th>车牌号</th>
                                    <th>工作序号</th>
                                    <th>压力</th>
                                    <th>转速</th>
                                    <th>湿度</th>
                                    <th>温度</th>
                                    <th>坍损值</th>
                                    <th>时间</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="item in list" :key="item.id">
                                    <td>{{item.devId}}</td>
                                    <td>{{item.plateNo}}</td>
                                    <td>{{item.workSequence}}</td>
                                    <td>{{item.pressure}}</td>
                                    <td>{{item.rotateSpeed}}r/m</td>
                                    <td>{{item.humidity}}%rh</td>
                                    <td>{{item.temperature}}℃</td>
                                    <td>{{item.calcResult}}mm</td>
                                    <td>{{item.insertTime}}</td>
                                </tr>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>

</div>

<th:block th:include="include :: footer" />
<th:block th:include="include :: switchery-js" />
</body>
<script>

    (function() {
        const app = new Vue({
            el: '#main',
            created: function () {
                this.doSearch();
                new Switchery(document.querySelector('.js-switch'), this.defaultConfig);

            },
            methods: {
                queryList(scope) {
                    if (scope != this.scope){
                        this.scope = scope;
                        this.doSearch();
                    }
                },
                doSearch() {
                    $.post(ctx + "concrete/monitor/list", {
                        scope: this.scope,
                        searchText: this.search
                    }, res => {
                        this.list = res.data;
                        console.log(this.list);
                    });
                }
            },
            data: {
                scope: "1",
                search: '',
                list: [],
                defaultConfig:{
                    color: '#1AB394',
                    size: 'small'
                }
            }
        });
    })();



</script>
</html>